<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <!--	bootstrap日期控件 -->
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <script src="static/js/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <style>

        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>

    <script>
        laydate.render({
            elem: '#start'
            , type: 'datetime'
        });
    </script>

</head>

<body>

<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">新增</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-heading">表单数据
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div style="text-align: center;">
                    <button id="btnform" onclick="toform()" type="button" class="btn btn-w-m btn-danger">我要请假</button>
                    <button id="btntable" onclick="totable()" type="button" class="btn btn-w-m btn-default">请假记录
                    </button>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-1 control-label">类型：</label>
                        <div class="col-sm-3">
                            <label class="radio-inline"> <input checked="true"
                                                                value="1" id="" name="type" type="radio"/>事假
                            </label> <label class="radio-inline"> <input value="2"
                                                                         name="type" type="radio"/>病假
                        </label> <label class="radio-inline"> <input value="3"
                                                                     name="type" type="radio"/>其他
                        </label>
                        </div>
                        <br/> <br/>
                        <div id="otherdiv" style="display: none">
                            <label class="col-sm-1 control-label">其他：</label>
                            <div class="col-sm-2">
                                <input id="othertext" name="othertext" class="form-control"
                                       placeholder="请输入文本" type="text"/>

                            </div>
                            <br/> <br/> <br/>
                        </div>

                        <label class="col-sm-1 control-label">时间：</label>
                        <div class="col-sm-3">
                            <input type="datetime-local" name="starttime" placeholder="开始日期"
                                   class="form-control layer-date" id="starttime" autocomplete="off"/>
                            <input type="datetime-local" name="endtime" placeholder="结束日期"
                                   class="form-control layer-date" id="endtime" autocomplete="off"/>
                        </div>
                        <br/> <br/> <br/> <br/> <br/> <label
                            class="col-sm-1 control-label">事由：</label>
                        <div class="col-sm-5">
					<textarea id="reason" name="reason" class="form-control"
                              placeholder="请输入文本"/>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">帮助</h4>
            </div>
            <div class="modal-body">
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题1</h4>
                    <p>测试内容1，测试内容1，测试内容1，测试内容1，测试内容1，测试内容1</p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题2</h4>
                    <p>测试内容2，测试内容2，测试内容2，测试内容2，测试内容2，测试内容2</p>
                </div>
            </div>
            <!--
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            -->
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    function getbegtime() {
        var today = new Date();
        var yyyy = today.getFullYear();
        var MM = today.getMonth() + 1;
        var dd = today.getDate();
        var hh = today.getHours();
        var mm = today.getMinutes();
        MM = checkTime(MM);
        dd = checkTime(dd);
        hh = checkTime(hh);
        mm = checkTime(mm);
        var time = yyyy + "-" + MM + "-" + dd + "T" + hh + ":" + mm;

        var dateControl = document.querySelector("#starttime");
        dateControl.value = time;

        dateControl = document.querySelector("#endtime");
        dateControl.value = time;

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    }


</script>
</body>
</html>
